<template>
  <div class='wrap' @mousedown="mousedown" @mouseup="mouseup">
    <img v-if="fileType==='pic'" @dragstart="dragstart" style="width:100%;height:100%;" :src="http + element.imgSrc">
    <video :id="videoId" v-if="fileType==='video'" @dragstart="dragstart" autoplay="autoplay" loop  style="width:100%;height:100%;object-fit: fill" :src="http + element.videoSrc">
      <source :src="http + element.videoSrc"  type="video/ogg">
      <source :src="http + element.videoSrc"  type="video/mp4">
    </video>
    <video :id="liveId" class="live" v-if="fileType === 'live'" @dragstart="dragstart" style="width:100%;height:100%;">
      <!--<source :src="element.videoSrc"  type="video/ogg">-->
      <!--<source :src="element.videoSrc"  type="video/mp4">-->
      <source :src="element.videoSrc" type="rtmp/flv">
      <source :src="element.videoSrc" type="application/x-mpegURL">
    </video>
    <div v-if="fileType === 'weather' || fileType == 'anim' || fileType === 'doc' || fileType === 'other'"
         @dragstart="dragstart" style="width:100%;height: 100%;position: absolute;z-index: 2; color: rgba(255,255,255,0)">
    </div>
    <div  v-if="fileType === 'weather'"  @click="weather"  style="width:100%;height:100%;position: absolute;z-index: 1" >
      <iframe :src="`https://tianqiapi.com/api.php?style=tg&skin=pitaya&color=${element.color.substring(1)}&fontsize=${element.fontSize}` "
               allowTransparency="true"
               frameborder="0"
               scrolling="no"
               width="100%"
               height="100%"
               id="weather_frame"></iframe>
    </div>

    <object v-if="fileType === 'doc' || fileType == 'anim'" :id="docId" type="application/x-shockwave-flash" :data="http + element.videoSrc" width="100%" height="100%">
      <param name="movie" :value="http + element.videoSrc" />
      <param name="quality" value="high" />
      <embed  :name="docId" :src="http + element.videoSrc" >
    </object>

    <div v-if="fileType === 'other'">
      <div v-if="element.imgSrc == 1" style="width: 100%;height: 100%;" :style="{'color': element.color,'font-size': element.fontSize + 'px'}">
        {{now}}
      </div>
    </div>
    <Operate v-if="fileType != 'other'" v-show="showOperate" @mousedown.native.stop="scaleMousedown" @mouseup.native.stop="scaleMouseup" @mousemove.native.stop="scaleMousemove"
    />
  </div>
</template>

<script>
    import Operate from '../Operate'
    import appConst from '../../util/appConst'
    export default{
      computed: {
        editorTheme () {
          return this.$store.state.editor.editorTheme
        },
        pageScale: {
          set (value) {
            this.$store.state.editor.pageScale = value
          },
          get () {
            return this.$store.state.editor.pageScale
          }
        }
      },
      props: {
        element: {
          type: Object,
          require: true
        },
        showOperate: {
          type: Boolean
        },
        fileType: {
          type: String,
          default: 'pic'
        }
      },
      data () {
        return {
          videoId: 'videoId' + new Date().getTime(),
          liveId: 'liveId' + new Date().getTime(),
          docId: 'docId' + new Date().getTime(),
          left: 0,
          top: 0,
          width: 0,
          height: 0,
          currentX: 0,
          currentY: 0,
          flag: false,
          scaleFlag: false,
          direction: '',
          http: appConst.BACKEND_DOMAIN,
          player: {},
          now: new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString()
        }
      },
      mounted () {
        console.log('fileType', this.fileType)
        let self = this
        if (this.fileType === 'live') {
          // window.videojs.options.flash.swf = 'http:localhost:8001/static/media/video-js.swf'
          this.player = window.videojs(this.liveId)
          this.player.play()
        }
        if (this.fileType === 'video') {
          // window.videojs.options.flash.swf = 'http:localhost:8001/static/media/video-js.swf'
          this.player = window.videojs(this.videoId)
          this.player.play()
        }
        if (this.fileType === 'doc') {
          setInterval(() => {
            console.log(window.document[this.docId])
            window.document[this.docId].Play()
          }, 1000)
        }
        if (this.fileType === 'anim') {
          window.document[this.docId].Play()
        }
        if (this.fileType === 'other') {
          setInterval(function () {
            self.now = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString()
          }, 1000)
        }
      },
      methods: {
        checkPosition () {
          // let self = this
          if (this.element.top < 0 || this.element.top + this.element.height > this.editorTheme.canvasHeight ||
        this.element.left < 0 || this.element.left + this.element.width > this.editorTheme.canvasWidth) {
            console.log('this.element', this.element)
            if (this.element.realityType != null) {
              if (this.element.top < 0) {
                this.element.top = 0
              }
              if (this.element.top + this.element.height > this.editorTheme.canvasHeight) {
                this.element.top = this.editorTheme.canvasHeight - this.element.height
              }
              if (this.element.left < 0) {
                this.element.left = 0
              }
              if (this.element.left + this.element.width > this.editorTheme.canvasWidth) {
                this.element.left = this.editorTheme.canvasWidth - this.element.width
              }
            } else {
              if (this.element.top < 0) {
                this.element.top = 0
              }
              if (this.element.top + this.element.height > this.editorTheme.canvasHeight) {
                this.element.height = this.editorTheme.canvasHeight - this.element.top
              }
              if (this.element.left < 0) {
                this.element.left = 0
              }
              if (this.element.left + this.element.width > this.editorTheme.canvasWidth) {
                this.element.width = this.editorTheme.canvasWidth - this.element.left
              }
              // this.$notify({
              //   title: '注意',
              //   dangerouslyUseHTMLString: true,
              //   message: '<strong style="color: orange">超出屏幕外的部分不会被显示</strong>',
              //   type: 'warning',
              //   position: 'bottom-right',
              //   duration: 2000
              // })
              // let func = this.checkPosition
              // this.checkPosition = function () {
              // }
              // setTimeout(function () {
              //   self.checkPosition = func
              // }, 2000)
            }
          }
        },
        weather (event) {
          event.preventDefault() // 阻止鼠标的默认点击事件
          event.stopImmediatePropagation()
          event.stopPropagation()
          return false
        },
        bodyScroll (event) {
          event.preventDefault()
        },
        // 处理元素拖动
        move () {
          document.querySelector('.editor').onmousemove = (event) => {
            var e = event || window.event
            // console.log('e', e)
            // console.log('document.body.scrollTop', event.offsetX)
            if (this.flag) {
              let nowX = e.clientX
              let nowY = e.clientY
              let disX = (nowX - this.currentX) / this.pageScale
              let disY = (nowY - this.currentY) / this.pageScale
              if (parseInt(this.left) + disX + this.element.width <= this.editorTheme.canvasWidth) {
                this.element.left = parseInt(this.left) + disX
              }
              if (parseInt(this.top) + disY + this.element.height <= this.editorTheme.canvasHeight) {
                this.element.top = parseInt(this.top) + disY
              }
              this.checkPosition()
            }
          }
        },
        // 处理元素伸缩
        scaleMousemove () {
          document.querySelector('.editor').onmouseup = (event) => {
            this.scaleFlag = false
          }
          document.querySelector('.editor').onmousemove = (event) => {
            console.log('this.element.edit', this.element.edit)
            if (this.element.edit === false) {
              console.log('元素不能缩放')
              return
            }
            var e = event || window.event
            if (this.scaleFlag) {
              let nowX = e.clientX
              let nowY = e.clientY
              let disX = nowX - this.currentX
              let disY = nowY - this.currentY
              switch (this.direction) {
                // 左边
                case 'w':
                  this.element.width = parseInt(this.width) - disX
                  this.element.left = parseInt(this.left) + disX
                  break
                // 右边
                case 'e':
                  this.element.width = parseInt(this.width) + disX
                  break
                // 上边
                case 'n':
                  this.element.height = parseInt(this.height) - disY
                  this.element.top = parseInt(this.top) + disY
                  break
                // 下边
                case 's':
                  this.element.height = parseInt(this.height) + disY
                  break
                // 左上
                case 'nw':
                  this.element.width = parseInt(this.width) - disX
                  this.element.left = parseInt(this.left) + disX
                  this.element.height = parseInt(this.height) - disY
                  this.element.top = parseInt(this.top) + disY
                  break
                // 左下
                case 'sw':
                  this.element.width = parseInt(this.width) - disX
                  this.element.left = parseInt(this.left) + disX
                  this.element.height = parseInt(this.height) + disY
                  break
                // 右上
                case 'ne':
                  this.element.height = parseInt(this.height) - disY
                  this.element.top = parseInt(this.top) + disY
                  this.element.width = parseInt(this.width) + disX
                  break
                // 右下
                case 'se':
                  this.element.height = parseInt(this.height) + disY
                  this.element.width = parseInt(this.width) + disX
                  break
              }
              this.checkPosition()
            }
          }
        },
        mousedown (e) {
          this.flag = true
          // window.document.body.addEventListener('touchmove', this.bodyScroll, false)
          this.currentX = e.clientX
          this.currentY = e.clientY
          this.top = this.element.top
          this.left = this.element.left
          this.move()
        },
        mouseup (e) {
          // window.document.body.removeEventListener('touchmove', this.bodyScroll, false)
          this.flag = false
          this.scaleFlag = false
        },
        scaleMousedown (e) {
          this.scaleFlag = true
          this.currentX = e.clientX
          this.currentY = e.clientY
          this.top = this.element.top
          this.left = this.element.left
          this.width = this.element.width
          this.height = this.element.height
          this.direction = e.target.getAttribute('data-direction')
          this.scaleMousemove()
        },
        scaleMouseup (e) {
          this.scaleFlag = false
        },
        dragstart (event) {
          console.log('dragstart')
          event.preventDefault()
        }
      },
      components: {
        Operate
      }
    }
</script>
<style>
  .live{

  }
</style>
<style lang='less' scoped>
  .wrap {
    position: absolute;
    cursor: move;
  }

  .wrap img {
    position: absolute;
    user-select: none;
    /*-webkit-user-drag: none;*/
  }
</style>
